import React, { Component } from "react";
import { Icon } from "antd";
import { connect } from "dva";
import styles from "./dataSourceDetail.less";
import AddApi from "./components/AddApi";
import Ads from "./components/Ads";
import DataHub from "./components/DataHub";
import Loghub from "./components/Loghub";

@connect(stores => ({
  dsDetail: stores.adddataSource
}))
class dataSourceDetail extends Component {
  renderDsType = type => {
    if (type === 1) {
      return "API";
    }
    if (type === 2) {
      return "ADS";
    }
    if (type === 3) {
      return "DataHub";
    }
    return "LogHub";
  };

  render() {
    const { history, dsDetail } = this.props;
    const { dataDetail = {} } = dsDetail;
    let owner = `暂无`;
    try {
      owner = JSON.parse(dataDetail.owner)[0].name;
    } catch (e) {
      owner = `暂无`;
    }
    return (
      <div className={styles.root}>
        <div className={styles.basicInfo}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className={styles.title}>基本信息</span>
            <Icon
              type="close"
              style={{ color: "rgba(0,0,0,0.45)", fontSize: 16 }}
              onClick={() => {
                history.push("/intellPush/recommendCenter/dataSource");
              }}
            />
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              数据源名称：
              <span className={styles.content}>
                {dataDetail.dsName || `暂无`}
              </span>
            </div>
            <div className={styles.onePiece}>
              管理员：
              <span className={styles.content}>{owner}</span>
            </div>
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              应用名称：
              <span className={styles.content}>
                {dataDetail.appName || `暂无`}
              </span>
            </div>
            <div className={styles.onePiece}>
              归属部门：
              <span className={styles.content}>
                {dataDetail.ownerDeptName || `暂无`}
              </span>
            </div>
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              数据源类型：
              <span className={styles.content}>
                {dataDetail.dsType
                  ? this.renderDsType(dataDetail.dsType)
                  : `暂无`}
              </span>
            </div>
          </div>
        </div>
        {dataDetail.dsType === 1 ? <AddApi dataDetail={dataDetail} /> : null}
        {dataDetail.dsType === 2 ? <Ads dataDetail={dataDetail} /> : null}
        {dataDetail.dsType === 3 ? <DataHub dataDetail={dataDetail} /> : null}
        {dataDetail.dsType === 4 ? <Loghub dataDetail={dataDetail} /> : null}
      </div>
    );
  }
}

export default dataSourceDetail;
